<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 定义传统对象字面量
        // const obj={
        //     name : "li",
        //     gender : "man",
        //     sayHi(){
        //         console.log(`my ${this.name}`)
        //         console.log("hi")
        //     }
        // }
        // obj.sayHi()
        // console.log(obj);

        // 传统方式给对象增加属性值和属性名
        // const gender= "gender"
        // const obj={
        //     name : "li",
        //     sayHi(){
        //         console.log(`my ${this.name}`)
        //         console.log("hi")
        //     }
        // }
        // obj[gender]= "man"
        // console.log(obj);


        // const gender= "gender"
        const gender= "aaa"
        const obj={
            name : "li",
            sayHi(){
                console.log(`my ${this.name}`)
                console.log("hi")
            },
            // 计算属性名
            // ES6方式给对象增加属性名（利用变量）和属性值
            // [gender]:"man"
            [gender]:"女"
            }
        obj.sayHi()
        console.log(obj);
        // 前者输出结果是gender:"man",后者输出结果aaa:"女"


    </script>
</body>
</html>